<template>
        <div>
                <div>
                        <input type="text" v-model="a">
                        <button type="button" @click="requestGetRolesPageHandler">角色分页列表</button>
                </div>
                <div>
                        <button type="button" @click="postRolesHandler">新增角色</button>
                </div>
                <button type="button" @click="putRolesByRoleID">put修改数据</button>
                <button type="button" @click="deleteRolesByids">delete:删除角色</button>
                <button type="button" @click="dengru">登入</button>
        </div>
        <div>
                <ul>
                        <li v-for="item in roles" :key="item.id">{{ item.id }}---{{ item.name }}</li>
                </ul>
        </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue';
import { addRole, delRole, editRole, userdengru, requestGetRolesPage, type RolesType } from './demo3'

const a = ref<number>(1)

const roles = ref<RolesType[]>([])

const requestGetRolesPageHandler = async () => {
        const res = await requestGetRolesPage({ pageNum: 1, pageSize: a.value })
        console.log(res.data.list)
        roles.value = res.data.list

}
const dengru = async () => {
        const res = await userdengru({ username: "admin", password: "123456" })
        console.log(res.msg)
        localStorage.setItem('token', res.data)
}

const postRolesHandler = async () => {
        const newRole = {
                id: 47457776677648,
                name: '33313',
                code: '333312321',
                sort: 2,
                status: 1,
                dataScope: 3
        }
        const res = await addRole(newRole)
        console.log(res.data.data)
}

const putRolesByRoleID = () => {
        editRole('9', {
                code: '00123',
                name: '修改的name',
                sort: 1,
                status: 1
        })
}
const deleteRolesByids = () => {
        delRole('9')
}

</script>

<style></style>